<!DOCTYPE html>
<style>
  #button::first-line { color: red; }
  #button.green::first-line { color: green; }
</style>
<button id="button">
  <div>
    <p>This text should be green.</p>
  </div>
</button>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
  document.getElementById('button').className = 'green';
}, true);
</script>
